<template>
  <view class="layout">
    <view class="navbar">
      <!-- 状态栏 -->
      <view class="statusBar" :style="{height:getStatusBarHeight()+'px'}"></view>
      <view class="titleBar" :style="{height:getTitleBarHeight()+'px'}">
        <view class="title">{{title}}</view>
        <view class="search" v-if="isSearch">
          <uni-icons class="icon" type="search" color="#888" size="18"></uni-icons>
          <text class="text">搜索</text>
        </view>
      </view>
    </view>
    <!-- 占位符 -->
    <view class="fill" :style="{height:getNavBarHeight() + 'px'}"></view>
  </view>
</template>

<script setup>
import {ref} from "vue"
import { getStatusBarHeight,getTitleBarHeight,getNavBarHeight } from "@/utils/system.js"
defineProps({
  title:{
    type:String,
    default:"慧学"
  },
  isSearch:{
    type:Boolean,
    default:true
  }
})
</script>

<style lang="scss">
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background:
    linear-gradient(to bottom,transparent,#fff 400rpx),
    linear-gradient(to right,#c8e6c9 20%,#bbdefb);
    .statusBar {
    }
    .titleBar {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      .title {
        font-size: 35rpx;
        font-weight: 700;
        color: #000;
      }
      .search {
        width: 220rpx;
        height: 50rpx;
        border-radius: 60rpx;
        background: rgba(255,255,255,.4);
        border: 1px solid #fff;
        margin-left: 30rpx;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        .icon {
          margin-left: 5rpx;
        }
        .text {
          color: #888;
          padding-left: 10rpx;
        }
      }
    }
  }
  .fill {
    
  }
}
</style>